import React, { useState } from 'react';
import { DeviceProvider } from './DeviceContext';
import DeviceList from './DeviceList';
import CodeEditor from './CodeEditor';
import { FileTransferManager } from './FileTransferManager';
import WebSocketManager from './WebSocketManager';
import './App.css';

const App: React.FC = () => {
  const [showTransferManager, setShowTransferManager] = useState(false);
  const [showWsManager, setShowWsManager] = useState(false);

  return (
    <DeviceProvider>
      <div className="app">
        <div className="app-header">
          <h1>AutoJS调试工具</h1>
        </div>
        <div className="app-content">
          <div className="left-panel">
            <div className="connection-controls">
              <button 
                className="ws-settings-button" 
                onClick={() => setShowWsManager(true)}
              >
                <span className="ws-icon">⚡</span>
                WebSocket连接设置
              </button>
            </div>
            <DeviceList onTransfer={() => setShowTransferManager(true)} />
          </div>
          <div className="editor-container">
            <CodeEditor />
          </div>
        </div>
        {showTransferManager && (
          <FileTransferManager
            onClose={() => setShowTransferManager(false)}
          />
        )}
        {showWsManager && (
          <div className="modal-overlay">
            <WebSocketManager onClose={() => setShowWsManager(false)} />
          </div>
        )}
      </div>
    </DeviceProvider>
  );
};

export default App; 